<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/detail.css">
    <link rel="stylesheet" href="../src/lib/layui/css/layui.css">
</head>

<body>
    <!-- 头部 -->
    <div id="head"></div>
    <div id="neirong">
        <div id="neirong_top">
            <a href="#">首页</a>&nbsp;>&nbsp;<a href="#">商品分类</a>&nbsp;>&nbsp;<a href="#">索菲亚屏风式拼色门厅隔断柜</a>
        </div>
        <div id="neirong_mid">
            <div id="neirong_mid_left">
                <!-- <div id="box_img">
                    <img src="https://img.suofeiya.com.cn/images/202007/b5ccf3c7032a07b0be67096ab0e45ffd.jpg" alt="">
                </div>
                <div id="box_bottom">
                    <ul>
                        <li><img src="https://img.suofeiya.com.cn/images/202007/817953ae324f9e6dd6f7dda446a098e2.jpg"
                                alt=""></li>
                        <li><img src="https://img.suofeiya.com.cn/images/202007/167d677e623b49c8b7e709b030f0aff1.jpg"
                                alt=""></li>
                        <li><img src="https://img.suofeiya.com.cn/images/202007/4bb56f376b05ea39d35c5020c7862bb6.jpg"
                                alt=""></li>
                        <li><img src="https://img.suofeiya.com.cn/images/202007/2982406ddbb0d6d7ee3d8651bbccdfb3.jpg"
                                alt=""></li>
                    </ul>
                </div> -->
            </div>
            <div id="neirong_mid_right">
                <!-- <h2>索菲亚屏风式拼色门厅隔断柜</h2>
                <p id="p11">双面见光双面漂亮；结构之美规整内敛；<span id="span_1">详情请咨询客服</span></p>
                <p id="p22">&nbsp&nbsp&nbsp&nbsp定制金：<span>￥</span><span>500</span></p>
                <div id="bianma">
                    <span>编码 ： <p>GXGK-UN19</p></span>

                </div>
                <div id="guige">
                    <span>规格 ：</span>
                    <a href="#">&nbsp&nbsp&nbsp&nbsp定制诚意金（具体价格以设计方案为准，详情咨询客服）</a>
                </div>
                <div id="shuliang">
                    <span id="spa1">数量：</span>
                    <span id="spa_jian">-</span>
                    <input type="text" name="" id="inp_1" value="1">
                    <span id="spa_jia">+</span>
                    <span id="spa2">库存:&nbsp&nbsp100</span>
                    <span id="spa3"><i id="i2"
                            class="layui-icon layui-icon-heart-fill"></i>&nbsp喜欢&nbsp&nbsp45896</span>
                    <div id="xuanxiang">
                        <a id="xiadan" href="#">立即购买</a>
                        <a id="jiagou" href="#">加入购物车</a>
                    </div>
                    <ul>
                        <li>
                            <img src="https://www.suofeiya.com/Www/Public_1/images/promise_1.png" alt="">
                            <span>正品保证</span>
                        </li>
                        <li>
                            <img src="https://www.suofeiya.com/Www/Public_1/images/promise_2.png" alt="">
                            <span>环保板材</span>
                        </li>
                        <li>
                            <img src="https://www.suofeiya.com/Www/Public_1/images/promise_3.png" alt="">
                            <span>免费服务</span>
                        </li>
                    </ul>

                </div> -->

            </div>

        </div>
        <div id="youhui_box">
            <div id="youhui">
                <h3>&nbsp&nbsp&nbsp优惠套餐<i class="layui-icon layui-icon-down"></i></h3>
            </div>
            <ul>
                <li>
                    <img src="https://img.suofeiya.com.cn/images/202005/06937606b804f8dcd960347d8ed8ede2.jpg" alt="">
                    <p id="pa">湖北省宜昌市三房两厅全屋定制</p>
                    <p id="pb">￥500.00</p>
                </li>
                <li>
                    <img src="https://img.suofeiya.com.cn/images/202005/06937606b804f8dcd960347d8ed8ede2.jpg" alt="">
                    <p id="pa">湖南省常德市两房两厅全屋定制</p>
                    <p id="pb">￥500.00</p>
                </li>
                <li>
                    <img src="https://img.suofeiya.com.cn/images/202005/06937606b804f8dcd960347d8ed8ede2.jpg" alt="">
                    <p id="pa">广东省茂名市四房两厅全屋定制</p>
                    <p id="pb">￥500.00</p>
                </li>
                <li>
                    <img src="https://img.suofeiya.com.cn/images/202005/06937606b804f8dcd960347d8ed8ede2.jpg" alt="">
                    <p id="pa">内蒙呼伦贝尔市三房两厅全屋定制</p>
                    <p id="pb">￥500.00</p>
                </li>
            </ul>
        </div>
        <div id="xqy">
            <div id="xqy_left">
                <h3>人气商品推荐</h3>
                <ul>
                    <li>
                        <img src="https://img.suofeiya.com.cn/images/202004/efc7f6f52abc7225c96368e2e4c7cf54.jpg"
                            alt="">
                        <div id="tuijian">
                            <span>索菲亚维纳圣影K系列全屋定制</span>
                            <span id="span_k">￥500.00</span>
                            <br>
                            <span>人气：17332</span>
                        </div>

                    </li>
                    <li>
                        <img src="https://img.suofeiya.com.cn/images/202004/6f83d0fc8aae83df90c5c6b2e4fe6b00.jpg"
                            alt="">
                        <div id="tuijian">
                            <span>索菲亚维纳圣影K系列全屋定制</span>
                            <span id="span_k">￥500.00</span>
                            <br>
                            <span>人气：17332</span>
                        </div>

                    </li>
                    <li>
                        <img src="https://img.suofeiya.com.cn/images/202004/105e0aee00b0e12c8eb7cb816570e232.jpg"
                            alt="">
                        <div id="tuijian">
                            <span>索菲亚维纳圣影K系列全屋定制</span>
                            <span id="span_k">￥500.00</span>
                            <br>
                            <span>人气：17332</span>
                        </div>

                    </li>
                    <li>
                        <img src="https://img.suofeiya.com.cn/images/202004/39b39c52bfc64dd4da13dc1e1ead31b9.jpg"
                            alt="">
                        <div id="tuijian">
                            <span>索菲亚维纳圣影K系列全屋定制</span>
                            <span id="span_k">￥500.00</span>
                            <br>
                            <span>人气：17332</span>
                        </div>

                    </li>
                    <li>
                        <img src="https://img.suofeiya.com.cn/images/202004/1c955092a90fdfddd349b4da3c10cefc.jpg"
                            alt="">
                        <div id="tuijian">
                            <span>索菲亚维纳圣影K系列全屋定制</span>
                            <span id="span_k">￥500.00</span>
                            <br>
                            <span>人气：17332</span>
                        </div>

                    </li>
                </ul>
            </div>
            <div id="xqy_right">
                <div id="xqy_fenye">
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">商品介绍</li>
                            <li>规格及包装</li>
                            <li>服务保障</li>

                        </ul>
                        <div class="layui-tab-content">
                            <div id="xqy_tu" class="layui-tab-item layui-show">
                                <img src="https://img.suofeiya.com.cn/images/202008/db20b64c-62d8-e51f-5d9f-c806871ef73d.jpg"
                                    alt="">
                                <img src="https://img.suofeiya.com.cn/images/202008/db20b64c-62d8-e51f-5d9f-c806871ef73d.jpg"
                                    alt="">
                                <img src="https://img.suofeiya.com.cn/images/202008/db20b64c-62d8-e51f-5d9f-c806871ef73d.jpg"
                                    alt="">
                                <img src="https://img.suofeiya.com.cn/images/202008/db20b64c-62d8-e51f-5d9f-c806871ef73d.jpg"
                                    alt="">
                                <img src="https://img.suofeiya.com.cn/images/202008/db20b64c-62d8-e51f-5d9f-c806871ef73d.jpg"
                                    alt="">
                                <img src="https://img.suofeiya.com.cn/images/202008/db20b64c-62d8-e51f-5d9f-c806871ef73d.jpg"
                                    alt="">
                                <img src="https://img.suofeiya.com.cn/images/202008/db20b64c-62d8-e51f-5d9f-c806871ef73d.jpg"
                                    alt="">
                                <img src="https://img.suofeiya.com.cn/images/202008/db20b64c-62d8-e51f-5d9f-c806871ef73d.jpg"
                                    alt="">
                                <img src="https://img.suofeiya.com.cn/images/202008/db20b64c-62d8-e51f-5d9f-c806871ef73d.jpg"
                                    alt="">
                                <img src="https://img.suofeiya.com.cn/images/202008/db20b64c-62d8-e51f-5d9f-c806871ef73d.jpg"
                                    alt="">
                            </div>
                            <div class="layui-tab-item">内容2</div>
                            <div class="layui-tab-item">内容3</div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <!-- 底部 -->
    <div id="foot"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="../src/lib/jquery-1.11.3.js"></script>
<script src="../src/lib/layui/layui.js" charset="utf-8"></script>
<!-- <script src="../src/js/fetch.js"></script> -->
<!-- <script src="../src/js/tools.js"></script> -->
<script src="../src/js/detail.js" type="module"></script>
<script>
    $('#head').load('../layout/head.html')
    $('#foot').load('../layout/foot.html')

</script>

<script>
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function () {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    , content: '内容' + (Math.random() * 1000 | 0)
                    , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            , tabDelete: function (othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            , tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });
</script>


</html>